<template>
  <div class="sys-org-container">
      <div style="width: 100%;">
        <screeningCondition :inquireInfo="state.inquireInfo" @getChildren="getData">
          <el-button @click="openAddOrg" type="primary">新建移库记录</el-button>
        </screeningCondition>
      </div>
        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
          <el-table :data="state.Data" class="el-table" v-loading="state.loading" row-key="id" default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border highlight-current-row
            :header-cell-style="{
              background: 'var(--el-color-primary)',
              height: '55px',
              color: '#fff',
              border: '1px solid #fff',
              fontWeight: 'bold',
              fontSize: '13px',
            }" :cell-style="{ padding: '2px' }">
            <el-table-column type="index" label="序号" align="center"></el-table-column>

            <el-table-column prop="relocatioNum" label="移库编号" align="center" show-overflow-tooltip />

            <el-table-column prop="workBinNum" label="料箱编号" align="center" show-overflow-tooltip />

            <el-table-column prop="materielNum" label="物料号" header-align="center" show-overflow-tooltip
              align="center" />
            <el-table-column prop="materielSpecs" label="规格型号" align="center" header-align="center"
              show-overflow-tooltip width="100" />
            <el-table-column prop="relocationCount" label="数量" align="center" header-align="center"
              show-overflow-tooltip width="70" />

            <el-table-column prop="oldStorage" label="原库位" header-align="center" show-overflow-tooltip align="center" />

            <el-table-column prop="newStorage" label="目标库位" header-align="center" show-overflow-tooltip
              align="center" />
            <el-table-column prop="relocationTime" label="移库时间" align="center" header-align="center"
              show-overflow-tooltip />

            <el-table-column prop="relocationUser" label="移库人" width="100" align="center" header-align="center"
              show-overflow-tooltip />

          </el-table>
          <el-pagination v-model:current-page="state.queryParams.page" v-model:page-size="state.queryParams.pageSize"
            :page-sizes="[20, 30, 40, 50]" layout="->,total, sizes, prev, pager, next, jumper" :total="state.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
        </el-card>
   
 
    <EditPos ref="editPosRef" :title="state.editPosTitle" @handleQuery="getData" />
  </div>
</template>

<script lang="ts" setup name="sysOrg">
import { onMounted, reactive, ref } from "vue";
import { WmsApi } from "/@/api/wh";
import screeningCondition from "/@/views/tools/screeningCondition.vue";
import EditPos from '/@/views/system/moveLocation/component copy/editPos.vue';

const editPosRef = ref()
const state = reactive({
  editPosTitle: '',
  loading: false,
  Data: [], // 机构列表数据
  queryParams: {
    page: 1,
    pageSize: 20,
  },
  ruleForm: {},
  total: 0,
  inquireInfo: [
    {
      label: "物料规格",
      value: "",
      key: "materielSpecs",
      options: [],
      type: "input",
    },
    {
      label: "移库时间",
      value: "",
      key: "dateTimes",
      options: [],
      type: "date",
    },
  ],
  //保留上一次的筛选条件
  value: {}
});

onMounted(async () => {
  getData(state.queryParams);

});
// 打开新增页面
const openAddOrg = () => {
  state.editPosTitle = '添加新移库记录';
  editPosRef.value?.openDialog(state.ruleForm);
};



// 查询操作
const getData = (value) => {
  state.value = value
  console.log(value);
  let dateTimes;
  //如果用户输入了时间条件，则对时间进行处理
  if (value?.dateTimes) {
     dateTimes = [value.dateTimes[0], value.dateTimes[1]];
  } 

  var params = {
    page: state.queryParams.page,
    pageSize: state.queryParams.pageSize,
    // 如果链中的某个引用是 null 或 undefined，表达式会立即返回 undefined 而不是抛出一个错误
    materielName: value?.materielName,
    dateTimes: dateTimes,
    materielSpecs: value?.materielSpecs,
  };
  console.log(params);
  WmsApi()
    .MovePagePost(params)
    .then(function (res) {
      state.Data = res.data.result.items;
      state.total = res.data.result.total;
    })
    .catch(function (error) {
      console.log(error);
    });
};


const handleSizeChange = (val) => {
  state.queryParams.pageSize = val;

  getData(state.queryParams);
};
const handleCurrentChange = (newVal) => {
  state.queryParams.page = newVal;

  getData(state.queryParams);
};
</script>
<style lang="scss" scoped>
.fl {
  width: 60%;
  margin: 20px 80px;
}

.container {
  margin-top: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100% - 82px);
}

.table {
  width: 100%;
  flex: 1;
  height: 100%;
}

.el-table {
  width: 100%;
}

.extra {
  width: 170px;
  height: 80px;

  :deep(.el-textarea__inner) {
    height: 80px;
  }
}
</style>